var lineChart;
var lineoption = {
        tooltip : {
            trigger: 'axis',
           
        },
        color:['#5ECAF1'],
        grid:{
            x:40,
            x2:20,
            y2:20
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                show:true,
                splitLine:{show: true},
                data: (function (){
                    var now = new Date();
                    var res = [];
                    var len = 5;
                    while (len--) {
                        res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                        now = new Date(now - 1000);
                    }
                    return res;
                })()
            }
        ],
        yAxis : [
            {
                type : 'value',
                show:true,
                min:0,
                max:100,
               	splitLine:{show: true}
            }
        ],
        series : [
            {
                name:'cpu',
                type:'line',
                
                data:[0,0,0,0,0],
                symbol:'none',
                itemStyle:{
                	normal:{
                		linestyle:{
                			color:'#f1f1f1',
                			width:2,
                		}
                	}
                },
                areaStyle: {
	                normal: {
	                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                        offset: 0,
	                        color: 'rgb(168, 225, 248)'
	                    }, {
	                        offset: 1,
	                        color: 'rgb(168, 225, 248)'
	                    }])
	                }
	            },
                
            }
            
            
        ]
    };
var gaugeChart;

var gaugeoption = {
        tooltip : {
            formatter: "{a} <br/>{c} {b}"
        },
       
        series : [
            {
                name:'内存',
                type:'gauge',
                min:0,
                max:100,
                splitNumber: 5,
                center: ['50%', '50%'],
                
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 3,
                        color: [[0.2, '#228B22'], [0.8, '#4488BB'], [1, '#FC9783']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    splitNumber: 20,
                    length :8,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length :12,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                title : {
                    show: true,
                    offsetCenter: [0, '-30%'],
                    textStyle: {       
                        fontWeight: 'bolder',
                        fontSize: 12,
                        fontStyle: 'italic'
                    }
                },
                detail : {
                    textStyle: {       
                        fontWeight: 'bolder',
                        fontSize: 18,
                        fontStyle: 'italic'
                    },
                    offsetCenter: [0, '60%']
                },
                data:[{value: 0, name: 'cpu%'}]
            },
           
        ]
    };
function initHome(){
	lineChart = echarts.init(document.getElementById("echarts-line-chart"));
    lineChart.setOption(lineoption);
    
    gaugeChart = echarts.init(document.getElementById("echarts-gauge-chart"));
    gaugeChart.setOption(gaugeoption);
    
}
    
function changeHomeEchartValue(cpu,mem){
	if(gaugeChart && gaugeoption) {
		gaugeoption.series[0].data[0].value = cpu;
    	gaugeChart.setOption(gaugeoption);
	}
    if(lineChart && lineoption) {
        axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
        lineoption.xAxis[0].data.shift();
        lineoption.xAxis[0].data.push(axisData);
        lineoption.series[0].data.shift();
        lineoption.series[0].data.push(mem);
		lineChart.setOption(lineoption);
    } 
}